<!DOCTYPE html>
<html>
<head>
    <title>模板编辑</title>
    <link href="__PLUGIN_TMPL__/public/assets/layui/css/layui.css" rel="stylesheet" type="text/css">
    <link href="__PLUGIN_TMPL__/public/assets/layui/css/backend.min.css" rel="stylesheet" type="text/css">
    <include file='public/head'>
        <style>
            table th, table td{text-align: center;}
            .ml-10 { margin-left: 10px; }
            .layui-icon{font-size: 14px !important;}
            .layui-form-label{ width: auto;}
            .layui-btn.layui-btn-sm .fa{ font-size: 14px !important;}
            .mr4{ margin-right: 4px;}
            .layui-form-item{ margin-bottom: 0px;}
            .row{ margin: 0 !important;}
            .form-horizontal .form-group { margin: 0 0 15px 0}
        </style>
</head>
<body>
    <div class="wrap js-check-wrap" style="padding: 20px 20px 0px 20px;">
        <ul class="nav nav-tabs">
            <php> $currentTab = 10 ;</php>
            <include file="public/nav" />
        </ul>
    </div>
    <div id="main" role="main">
        <div class="tab-content tab-addtabs">
            <div id="content">
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <div class="content">
                            <form id="edit-form" class="form-horizontal nice-validator n-default n-bootstrap">
                                <div class="form-group">
                                    <label class="control-label col-xs-12 col-sm-2">模板名称</label>
                                    <div class="col-xs-12 col-sm-8">
                                        <input type="hidden" name='id' value="{$module.id|default=0}"/>
                                        <input type="text" name="template_name" class="form-control" value="{$module.template_name|default=''}" required placeholder="请填写模板名称!">
                                        <div id="show-status-name" style="line-height: 18px;"></div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-xs-12 col-sm-2">模板分类</label>
                                    <div class="col-xs-12 col-sm-8">
                                        <div class="checkbox">
                                            <volist name="typeList" id="vo">
                                                <label>
													
                                                    <input type="radio" name="type" value="{$vo.name}" <?php if( isset($module['type']) && $module['type'] == $vo['name'] ) echo 'checked';?> > {$vo.title}
                                                </label>
                                            </volist>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-xs-12 col-sm-2">选择模块</label>
                                    <div class="col-xs-12 col-sm-8">
                                        <select class="form-control" name="name" required id="select-module-list" placeholder="请选择模块">
                                            <option value=''>请选择模块</option>
                                            <volist name ="moduleList" id="vo">
                                                <option value='{$vo.name}' data-v="{:implode(',',$vo.version)}" data-t="{$vo.title}" <?php if( isset( $module['name']) && $vo['name'] == $module['name']){ $currentVersion = $vo['version'];  echo 'selected'; } ?> >{$vo.name}&{$vo.title}</option>
                                            </volist>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-xs-12 col-sm-2">选择模块版本:</label>
                                    <div class="col-xs-12 col-sm-8">
                                        <select class="form-control" name="version" required version="" id="select-module-version" placeholder="请选择模块版本">
                                            <if condition='isset($currentVersion)'>
                                                <?php
                                                    foreach( $currentVersion as $key => $value ){
                                                        $selected = '';
                                                        if( $value == $module['version'] ) $selected='selected';
                                                        echo '<option value="'.$value.'"  '.$selected.'>'.$value.'</option>';
                                                    }
                                                ?>
                                            <else/>
                                                <option value="">-</option>
                                            </if>
                                            
                                        </select>
                                    </div>
                                </div>
                                 <div class="form-group">
                                    <label class="control-label col-xs-12 col-sm-2">现有模板:</label>
                                    <div class="col-xs-12 col-sm-8">
                                        <p class="form-control-static" id="exists-template">暂无模板信息</p>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-xs-12 col-sm-2">模板简介:</label>
                                    <div class="col-xs-12 col-sm-8">
                                        <input class="form-control"   name="describe" type="text" required  value="{$module.describe|default=''}" placeholder="请填写模块简介信息" required>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-xs-12 col-sm-2">模板功能介绍:</label>
                                    <div class="col-xs-12 col-sm-8">
                                        <textarea class="form-control"  rows='3' name="introduce" required  placeholder="请填写模功能介绍" required>{$module.introduce|default=''}</textarea>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-xs-12 col-sm-2">温馨提醒:</label>
                                    <div class="col-xs-12 col-sm-8">
                                        <textarea class="form-control"  rows='3' name="warning" required   placeholder="请填写温馨提醒" required>{$module.warning|default=''}</textarea>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-xs-12 col-sm-2">价格:</label>
                                    <div class="col-xs-12 col-sm-8">
                                        <input type="number" name="price" class="form-control" required value="{$module.price|default='0'}" placeholder="请填写价格" />
                                    </div>
                                </div>
                                <!-- 思维导图url开始 -->
                                <div class="form-group">
                                    <label for="c-keywords" class="control-label col-xs-12 col-sm-2">思维导图URL:</label>
                                    <div class="col-xs-12 col-sm-8">
                                        <input id="image_info" class="form-control" size="35" name="mind_map_url" type="text" value="{$module.mind_map_url|default=''}" placeholder="填写思维导图URL" required >
                                    </div>
                                </div>
                                
                                <!-- 思维导图url结束 -->      
                                <!-- 原型图url开始 -->
                                <div class="form-group">
                                    <label for="c-keywords" class="control-label col-xs-12 col-sm-2">原型图URL:</label>
                                    <div class="col-xs-12 col-sm-8">
                                        <input id="image_info" class="form-control" size="35" name="flow_chart_url" type="text" value="{$module.flow_chart_url|default=''}" placeholder="填写原型图URL地址" required >
                                    </div>
                                </div>
                                <!-- 原型图url结束 -->   

                                <!-- ui设计图url开始 -->
                                <div class="form-group">
                                    <label for="c-keywords" class="control-label col-xs-12 col-sm-2">UI设计图URL:</label>
                                    <div class="col-xs-12 col-sm-8">
                                        <input id="image_info" class="form-control" size="35" name="ui_url" type="text" value="{$module.ui_url|default=''}" placeholder="填写UI设计图URL地址" required >
                                    </div>
                                </div>
                                
                                <!-- ui设计图url结束 -->     

                                <if condition="!empty($module['id'])">

                                    <div class="form-group">
                                        <label class="control-label col-xs-12 col-sm-2">思维导图:</label>
                                        <div class="col-xs-12 col-sm-8">
                                            <div class="input-group">
                                                <input name="mind_map" type="text" class="form-control" readonly value="{$module.mind_map|default=''}"  placeholder="请上传思维导图文件">
                                                <div class="input-group-addon no-border no-padding">
                                                    <span style="position: relative;">
                                                        <button type="button" class="btn btn-danger plupload" style="position: relative; z-index: 1;" id="mindMap"><i class="fa fa-upload"></i> 上传思维导图文件</button>
                                                    </span>
                                                    <!-- <span>
                                                        <button type="button" class="btn btn-primary fachoose"><i class="fa fa-list"></i> 选择</button>
                                                    </span> -->
                                                </div>
                                                <span class="msg-box n-right"></span>
                                            </div>
                                            <ul class="row list-inline plupload-preview" id="image_list"></ul>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="control-label col-xs-12 col-sm-2">原型图:</label>
                                        <div class="col-xs-12 col-sm-8">
                                            <div class="input-group">
                                                <input name="flow_chart" type="text" class="form-control" readonly value="{$module.flow_chart|default=''}"  placeholder="请上传原型图文件" >
                                                <div class="input-group-addon no-border no-padding">
                                                    <span style="position: relative;">
                                                        <button type="button" class="btn btn-danger plupload" style="position: relative; z-index: 1;" id="flowChart"><i class="fa fa-upload"></i> 原型图</button>
                                                    </span>
                                                    <!-- <span>
                                                        <button type="button" class="btn btn-primary fachoose"><i class="fa fa-list"></i> 选择</button>
                                                    </span> -->
                                                </div>
                                                <span class="msg-box n-right"></span>
                                            </div>
                                            <ul class="row list-inline plupload-preview" id="image_list"></ul>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label col-xs-12 col-sm-2">UI设计图:</label>
                                        <div class="col-xs-12 col-sm-8">
                                            <div class="input-group">
                                                <input name="ui" type="text" class="form-control" readonly value="{$module.ui|default=''}"  placeholder="请上传UI设计图文件" >
                                                <div class="input-group-addon no-border no-padding">
                                                    <span style="position: relative;">
                                                        <button type="button" class="btn btn-danger plupload" style="position: relative; z-index: 1;" id="uiMap"><i class="fa fa-upload"></i> 上传UI设计图文件</button>
                                                    </span>
                                                    <!-- <span>
                                                        <button type="button" class="btn btn-primary fachoose"><i class="fa fa-list"></i> 选择</button>
                                                    </span> -->
                                                </div>
                                                <span class="msg-box n-right"></span>
                                            </div>
                                            <ul class="row list-inline plupload-preview" id="image_list"></ul>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="control-label col-xs-12 col-sm-2">上传模板压缩包(.zip格式):</label>
                                        <div class="col-xs-12 col-sm-8">
                                            <div class="input-group">
                                                <input name="resource" type="text" class="form-control" readonly value="{$module.resource|default=''}"  placeholder="请上传模板压缩包文件">
                                                <div class="input-group-addon no-border no-padding">
                                                    <span style="position: relative;">
                                                        <button type="button" class="btn btn-danger plupload" style="position: relative; z-index: 1;" id="resource"><i class="fa fa-upload"></i> 上传模板源码</button>
                                                    </span>
                                                    <!-- <span>
                                                        <button type="button" class="btn btn-primary fachoose"><i class="fa fa-list"></i> 选择</button>
                                                    </span> -->
                                                </div>
                                                <span class="msg-box n-right"></span>
                                            </div>
                                            <ul class="row list-inline plupload-preview" id="image_list"></ul>
                                        </div>
                                    </div>
                                    <!--预览图开始  -->
                                    <div class="form-group">
                                        <label class="control-label col-xs-12 col-sm-2">预览图:</label>
                                        <div class="col-xs-12 col-sm-8">
                                            <div class="input-group">
                                                <div class="input-group-addon no-border no-padding">
                                                    <span style="position: relative;">
                                                        <input type="hidden" name="preview" value="{$module.preview|default=''}" placeholder="请上传模板预览图"  />
                                                        <button type="button" class="btn btn-danger plupload" style="position: relative; z-index: 1;" id="images_upload"><i class="fa fa-upload"></i> 上传</button>
                                                    </span>
                                                </div>
                                                <span class="msg-box n-right"></span>
                                            </div>
                                            <ul class="row list-inline plupload-preview" id="images_list">
                                                <?php $extra = cmf_get_extra_dir(); $extra = empty( $extra )? '':$extra.'/' ; ?>
                                                <volist name="previewList" id="vo">
                                                    <li class="col-xs-3"><a href="/<?php echo $extra.$previewList[$key] ; ?>" data-url="#" target="_blank" class="thumbnail"><img src="/<?php echo $extra.$previewList[$key] ; ?>" alt="00" class="img-responsive"></a><a href="javascript:;"  class="btn btn-danger btn-xs btn-trash upload-delete-btn"><i class="fa fa-trash"></i></a></li>
                                                </volist>
                                            </ul>
                                        </div>
                                    </div>
                                    <!--预览图结束  -->
                                </if>
                                <div class="form-group">
                                    <input type="hidden" id="audit-id" name="" value="{$module.id|default=0}">
                                    <label for="c-keywords" class="control-label col-xs-12 col-sm-2">操作:</label>
                                    <div class="col-xs-12 col-sm-8">
                                        <if condition="isset($module['status']) and $module['status'] eq 1">
                                            <button class="btn btn-primary" type="button">模板审核中...</button> 
                                        <else/>
                                            <a href="javascript:;" class="btn btn-primary" onclick="formData(this,'save');"><span class="glyphicon glyphicon-floppy-disk"></span>保存</a>
                                            <if condition="!empty($module['id'])">
                                                <a href="javascript:;" class="btn btn-success" onclick="formData(this,'audit');"><span class="glyphicon glyphicon-saved"></span>提交审核</a>
                                            </if>
                                        </if>
                                    </div>
                                </div>

                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <include file='public/scripts'>
    <script src="__PLUGIN_TMPL__/public/assets/layui/layui.all.js"></script>
    <script src="__STATIC__/js/custom/custom.js"></script>
<script type="text/javascript">

    //多图容器
    var imgTmp = <?php echo json_encode($previewList);?>;
    var method = {};
    $(function(){
        ;!function(){
            var layer = layui.layer
            ,form = layui.form
            ,$ = layui.jquery
            ,upload = layui.upload;

            //上传模块压缩包文件
            upload.render({ 
                elem: '#resource'
                ,url: "{:cmf_plugin_url('Appmarket://Template/upResource')}?id={$module.id|default=0}"
                ,accept: 'file' //普通文件
                ,exts: "zip" //只允许上传压缩文件
                ,done: function( data ){
                    var icon  = ( data.code == 200 ) ? 1 : 5;
                    layer.msg( data.message , { icon: icon } );
                    if( icon == 1 ){
                        $('input[name=resource]').val( data.data );
                    }           
                }
            });

            $('.plupload-preview').on('click','.btn-trash',function(){
                if($(this).parent('#image_list')){
                    $('#image_list li').remove();
                    $('#image_info').val('');
                }else{
                    $(this).parent('li');
                }
                
            })          
            //多图片上传
            upload.render({
                elem: '#images_upload'
                ,url: '{:cmf_plugin_url("Appmarket://Template/preview")}?id={$module.id|default=0}'
                ,exts:'jpg|bmp|png|gif|jpeg'
                ,multiple: true
                ,before: function(obj){
                  //预读本地文件示例，不支持ie8
                  obj.preview(function(index, file, result){
                      $('#images_list').append('<li class="col-xs-3"><a href="" data-url="#" target="_blank" class="thumbnail"><img src="'+result+'" alt="'+ file.name +'" class="img-responsive"></a><a href="javascript:;"  class="btn btn-danger btn-xs btn-trash upload-delete-btn"><i class="fa fa-trash"></i></a></li>')
                  });
                }
                ,done: function(res){
                    //上传完毕
                    if(res.code!=200){
                        $('#images_list').html('');
                        $('input[name=preview]').val('');
                        return layer.msg(res.message);
                    }else{
                        //成功后的操作
                        imgTmp.push(res.data);
                        $('input[name=preview]').val(imgTmp);
                    }
                }
            });


            //上传ui图
            upload.render({ 
                elem: '#uiMap'
                ,url: "{:cmf_plugin_url('Appmarket://Template/uiMap')}?id={$module.id|default=0}"
                ,accept: 'file' //普通文件
                ,exts: "zip" //只允许上传压缩文件
                ,done: function( res ){
                    showMessage( res , 'ui' , '#uiMap' );               
                }
            });
            //上传思维导图
            upload.render({ 
                elem: '#mindMap'
                ,url: "{:cmf_plugin_url('Appmarket://Template/mindMap')}?id={$module.id|default=0}"
                ,accept: 'file' //普通文件
                ,exts: "zip" //只允许上传压缩文件
                ,done: function( res ){
                    showMessage( res , 'mind_map' , '#mindMap' );               
                }
            });
            //上传原型图
            upload.render({ 
                elem: '#flowChart'
                ,url: "{:cmf_plugin_url('Appmarket://Template/flowChart')}?id={$module.id|default=0}"
                ,accept: 'file' //普通文件
                ,exts: "zip" //只允许上传压缩文件
                ,done: function( res ){
                    showMessage( res , 'flow_chart' , '#flowChart' );               
                }
            });

            var showMessage = function( data , inputName , id ){
                var icon  = (data.code == 200 )? 1: 5;
                layer.msg( data.message , { icon: icon });
                if( icon == 1 ){
                    $('input[name='+inputName+']').val(data.data);
                }
            }

        }();
    })

    //移除图片
    $(document).on( 'click' , '.upload-delete-btn' , function(){
        var _this = $(this);
        var img = _this.parents('li').find('img');
        var index = $('.img-responsive').index(img);
        var file = imgTmp[index];
        imgTmp.splice(index,1);
        _this.parents('li').remove();
        $('input[name=preview]').val(imgTmp);
        $.post( "{:cmf_plugin_url('Appmarket://Template/trashFile')}" , { file : file , id: $('#audit-id').val() , preview : $('input[name=preview]').val()  } , function(data){
        } , 'json');
    });
</script>

<script type="text/javascript">
    //选择模块
    $('#select-module-list').on('change' , function(){
        let option = $(this).find('option:selected');
        let versions = option.data('v')+'';
        let arr = versions.split(',');
		
        var op = '';
        for( var i = 0 ; i < arr.length; i++ ){
            op += '<option value="'+arr[i]+'">'+arr[i]+'</option>';
        }
        if( op == '' ){
            op = '<option value="">请选择模块</option>';
        }else{
            let n  = $("#select-module-list option:selected").val();
            let v =$('#select-module-version option:selected').val();
            getExistsTemplate( n , v );
        }
        $( '#select-module-version' ).html(op);
    });

    //选择版本
    $("#select-module-version").on( 'change' , function(){
        let n  = $("#select-module-list option:selected").val();
        let v =$('#select-module-version option:selected').val();
        if( n == '' ){
            return false;
        }
        getExistsTemplate( n , v );
    });

    //获取已有模板
    var getExistsTemplate = function( name , version ){
        $.post( '{:cmf_plugin_url("Appmarket://Template/getExistsTemplate")}' , { name:name , version:version } , function( data ){
			console.log( data );
            let icon = ( data.code == 200 ) ? 1 : 5 ;
            if( icon == 1 && data.data != undefined ){
                var list = data.data;
				console.log(list);
                var str = '';
                $.each( list , function( i , v ){
                    str += v.template_name+'&nbsp;&nbsp;&nbsp;&nbsp;'
                });
                $( '#exists-template' ).html( str );
            } else{
                $("#exists-template").html('暂无模板信息');
            }
        }  , 'json' );
    }

    //检查模板名称是否重复
    /*var checkTemplateName = function( _this ){
        let value = $(_this).val();
        $('#show-status-name').html('');
        if( $.trim( value ).length == 0 ){
            var span = '<span style="color:red;">模板名称不能为空!</span>';
            $('#show-status-name').html(span);
        }

        //检查
        $.post( '{:cmf_plugin_url("Appmarket://Template/checkTemplateName")}' , {name:value} , function(data){
            var span = '<span style="'+( (data.status=='success') ? 'color:green;' : 'color:red;' )+'">'+data.message+'</span>';
            $('#show-status-name').html(span);
        },'json');
    }*/

    //获取表单数据
    var formData = function( _this , type ){
        var formData = $($('#edit-form').serializeArray());
		
        var tmp = {};
        var message = '请将信息填写完整再提交!';
        var flag = true;
		var hasType = false;
		
        $.each(formData,function( index , value ){
            $('[name='+value.name+']').css('border','');
            if( $.trim( value.value ) == ""  &&  ( $('[name='+value.name+']').attr('required') != undefined )  ){
                $('[name='+value.name+']').css('border','1px solid red');
                flag = false;
                message = $('[name='+value.name+']').attr('placeholder');
                return false;
            }
			
			if( value.name == 'type' ){
				hasType = true;
			}
			
            //提交审核的时候必须校验
            if( type == "audit" ){
                //思维导图文件上传
                if( $.trim( $('[name=mind_map]').val() ) == ''  ){
                    message = $('[name=mind_map]').attr('placeholder');
                    flag = false;
                    return false;
                }       
                //原型图文件上传   
                if( $.trim( $('[name=flow_chart]').val() ) == ''  ){
                    message = $('[name=flow_chart]').attr('placeholder');
                    return false;
                }
                //ui图   
                if( $.trim( $('[name=ui]').val() ) == ''  ){
                    message = $('[name=ui]').attr('placeholder');
                    flag = false;
                    return false;
                }
                //模板源文件
                if( $.trim( $('[name=resource]').val() ) == ''  ){
                    message = $('[name=resource]').attr('placeholder');
                    flag = false;
                    return false;
                }
                //预览图preview
                if( $.trim( $('[name=preview]').val() ) == ''  ){
                    message = $('[name=preview]').attr('placeholder') ;
                    flag = false;
                    return false;
                }
            }
            tmp [ value.name ] = value.value;
        });
		
    
        if( !flag ){
            layer.msg( message );
            return false;
        }
		
		if( hasType == false ){
			layer.msg( "请选择模板类型" );
			return false; 
		}
        tmp ['title'] = $('[name=name] option:selected').data('t');
        let templateId = '{$module.id|default=0}';
        let url = '{:cmf_plugin_url("Appmarket://Template/publishPost")}';
        $.post( url , {data:tmp , type : type , id:templateId} , function(data){
            let icon = (data.code == 200 ) ? 1 : 5 ;
            layer.msg( data.message , {icon:icon} );
            if( icon == 1 ){
                setTimeout(function(){
                    window.location.href = data.data;
                },1200);
            }
        },'json');
    }
</script>
</body>
</html>

